<template>
    <div class="search-index">
        <div class="container" v-loading="loading">
            <!-- 有商品显示搜索结果，否则显示空结果-->
            <transition name="fade" mode="out-in">
                <component :is="Component"></component>
            </transition>
            <el-button @click="input.focus()" :icon="Search"
                >点击搜索</el-button
            >
            <!-- 推荐模块 -->
            <SearchCommend
                panelName="为您推荐"
                :GoodsList="commendGoods"
                @updateList="updateList"
            />
        </div>
    </div>
</template>
<script setup>
import SearchCommend from './components/search-commend.vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { watch, nextTick, ref, shallowRef, onBeforeMount } from 'vue'
import { findGoodsByKeyWord } from '@/apis/search'
import NotSearch from './components/not-search.vue'
import SearchResultIsEmpty from './components/search-result-is-empty.vue'
import SearchResult from './components/search-result.vue'
import { searchStore } from '@/stores/search'
import { findGoodsByLimit } from '@/apis/goods'
let input = ref('')
let commendGoods = ref('')
const useSearchStore = searchStore()
// 搜索后，根据结果判断加载组件
let Component = shallowRef(null)
const route = useRoute()
let loading = ref(true)
let goodsKeyWord = route.query.goodsKeyWord
// 获取推荐商品
const findCommendGoods = limit => {
    findGoodsByLimit(limit).then(res => {
        commendGoods.value = res
    })
}
const updateList = () => {
    findCommendGoods(12)
}
onBeforeMount(() => {
    setTimeout(() => {
        input.value = document.querySelector('#input')
    }, 1500)
})
const find = goodsKeyWord => {
    // 搜索内容为空，直接拦截，不发送请求
    if (goodsKeyWord == '') {
        Component.value = NotSearch
        loading.value = false
    } else {
        findGoodsByKeyWord(goodsKeyWord)
            .then(res => {
                // 搜索结果为空
                if (res.length == 0) {
                    Component.value = SearchResultIsEmpty
                } else {
                    // 搜索到目标商品
                    useSearchStore.setGoodsList(res)
                    Component.value = SearchResult
                }
                useSearchStore.updateHistory([goodsKeyWord])
                loading.value = false
            })
            .catch(err => {
                console.log(err)
            })
    }
    findCommendGoods(12)
}
watch(
    () => route.query.goodsKeyWord,
    newVal => {
        if (newVal == null) {
            return
        } else {
            goodsKeyWord = newVal
            find(goodsKeyWord)
            nextTick()
        }
    },
    {
        immediate: true,
    }
)
find(goodsKeyWord)
</script>

<style lang="scss" scoped>
.search-index {
    --el-color-primary: #da9233;
    width: 100vw;
    .container {
        min-height: 400px;
        width: 1340px;
        background-color: #ffffff;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>
